<template>
  <div>
    <div class="head">
      <el-row>
        <img class="menu" src="@/assets/back.png" @click="back"/>
        <h3 class="huiben">绘本</h3>
      </el-row>
    </div>
    <div class="box">
      <div class="swiper-container" :class="swipeid">
        <div class="swiper-wrapper">

          <slot name ="swiper-con"></slot>
        </div>
        <div :class="{'swiper-pagination':pagination}"></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      swipeid: {
        type: String,
        default: ""
      },
      effect: {
        type: String,
        default: "slide"
      },
      loop: {
        type: Boolean,
        default: false
      },
      direction: {
        type: String,
        default: "horizontal"
      },
      pagination: {
        type: Boolean,
        default: true
      },
      paginationType: {
        type: String,
        default: "bullets"
      },
      autoPlay: {
        type: Number,
        default: 3000
      }
    },
    data() {
      return {

      }
    },
    props:{
      pictures:Array,
      export:{

      }

    },
    mounted: function () {
      // this.getPicture()
    },
    methods: {
      back: function () {
        this.$router.back(-1)
      },

    }
  }
</script>
<style>

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }



  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .picture {
    width: auto;
    height: 100%;
  }
  .box{
    padding: 71px;
  }
  .head{
    position: fixed;
    margin-top: 0;
    z-index: 100;
    background-color:white;
    border-bottom   : darkgray solid 1px;
    height: 70px;
    width: 50%;
    min-width: 200px;
    /*margin-top: -15px;*/
  }
  .menu{
    margin-top: 16px;
    float: left;
    margin-left: 50px;
    margin-right: 20px;
  }
  .huiben{
    float: left
  }

</style>
